<template>
	<view class="container">
		<!-- 时间搜索 -->
		<view class="u-flex time">
		    <view class="t-box" @click="KStimeShow = true">
		        <input type="text" v-model="startTime" placeholder="开始时间" disabled />
				<image src="../../static/icon/date.png" mode=""></image>
		    </view>
		    <view class="line"></view>
		    <view class="t-box" @click="JStimeShow = true">
		        <input type="text" v-model="endTime" placeholder="结束时间" disabled />
		        <image src="../../static/icon/date.png" mode=""></image>
		    </view>
		    <view class="search" @click="doSearch">搜索</view>
		</view>
        
        <view class="wrapper">
            <view class="concent-frame1" >
            	<view class="info" v-for="(item, index) in list" :key="index">
            		<view class="u-flex u-row-between u-m-b-32">
            			<view class="tit u-flex-1">{{item.remark}}</view>
            			<view class="date">{{item.change_time}}</view>
            		</view>
            		<view class="u-flex u-col-bottom">
            			<view style="width: 312rpx;">
            				<view class="num1">{{item.balance}}</view>
            				<view class="num1-tit">变更金额(元)</view>
            			</view>
            			<view class="u-flex-1">
            				<view class="num2">{{item.sy_money}}</view>
            				<view class="num1-tit">剩余金额(元)</view>
            			</view>
            		</view>
            	</view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				KStimeShow: false, //开始时间
				JStimeShow: false, //结束时间
				startTime: '', //开始时间
				endTime: '', //结束时间
				timeParams: { //时间格式
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
			}
		},
		
		onLoad() {
            // this.getList()
		},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods:{
		    //选择时间
		    chooseTime(num, e) {
		    	if (num == 1) {
		            this.startTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		        if (num == 2) {
		            this.endTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		    },
		    // 搜索
		    doSearch() {
		        this.page = 1;
		        this.list = [];
		        this.status = 'loadmore';
		        this.getList()
		    },
		    getList() {
		    	if (this.status == 'nomore') return;
		    	this.status = 'loading';
		    	this.$ajax('commission', {
		    		userToken: this.$getSync('userToken'),
		    		page: this.page,
		    		limit: 10,
		            pbegin: this.startTime, //搜索开始时间
		            pend: this.endTime, //搜索结束时间
		    	}).then(ret => {
		    		if (ret.status == 0) {
		    			if (ret.data.length > 0) {
		    				this.list = this.list.concat(ret.data);
		    				this.page++;
		    				this.status = 'loadmore'
		    			} else {
		    				this.status = 'nomore'
		    			}
		    		} else {
		    			this.$toast(ret.message);
		    		}
		    	});
		    },
		}
	}
</script>

<style lang="scss">
    page{
        background-color: #fff;
        // border-top: 2rpx solid #e6e6e6;
    }
    .wrapper{
        padding: 0 20rpx 100rpx;
    }
    
    
	
    .time {
        width: 100%;
        background-color: #f5f5f5;
        padding: 30rpx 20rpx;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 38rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 24rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #2658aa;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #fff;
            line-height: 68rpx;
            background-color: #2658aa;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    
    .concent-frame1 {
    	width: 100%;
    	// height: calc(100vh - 64px);
    	// background-color: #fff;
    	// padding: 0 20rpx;
    
    	.info {
    		width: 100%;
    		padding: 38rpx 0;
    		border-bottom: 1rpx solid #e4e4e4;
    
    
    		.tit {
    			font-size: 30rpx;
    			line-height: 32rpx;
    			color: 444444;
    			font-weight: bold;
    		}
    
    		.date {
    			height: 33rpx;
    			font-size: 24rpx;
    			line-height: 33rpx;
    			color: #8c8c8c;
    			border-radius: 3rpx;
    			padding: 0 10rpx;
    			background-color: #f8f8f8;
    		}
    
    		.num1 {
    			font-size: 56rpx;
    			color: #f76d0a;
    		}
    
    		.num2 {
    			font-size: 40rpx;
    			color: #444444;
    		}
    
    		.num1-tit {
    			font-size: 24rpx;
    			color: #8f8f8f;
    		}
    
    		//无状态样式
    		.state {
    			width: 96rpx;
    			height: 40rpx;
    			font-size: 24rpx;
    			line-height: 40rpx;
    			text-align: center;
    			border-radius: 5rpx;
    		}
    
    		// 未审核样式
    		.state1 {
    			color: #ff9600;
    			background-color: #fff1de;
    		}
    
    		// 审核中样式
    		.state2 {
    			color: #f62a2a;
    			background-color: #ffe7e7;
    		}
    
    		// 已审核样式
    		.state3 {
    			color: #0042bc;
    			background-color: #e7f3ff;
    		}
    	}
    }
	
</style>
